.entry {
    width: 200px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 150px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    max-height: 0px;
}

.entry .card {
    height: 300px;
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    border: 4px solid rgba(255, 255, 255, .1);
    background-color: rgba(255, 255, 255, .9);
    -webkit-transition: 500ms all ease;
    transition: 500ms all ease;
    margin: 0;
    line-height: 300px;
    font-size: 20px;
    text-align: center;
}

.entry a {
    text-decoration: none !important;
    color: #444;
}

.shadow {
    position: absolute;
    left: 0;
    top: 110%;
    width: 100%;
    height: 40%;
    overflow: hidden;
    -webkit-transition: 3s all ease;
    transition: 3s all ease;
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1);
    opacity: 0;
    pointer-events: none;
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .3));
}

.index {
    position: relative;
    margin: auto;
    padding: 0;
    width: 1600px;
    height: 900px;
    cursor: move;
}

.images {
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 2000px;
}

.images img {
    height: 100%;
    width: 100%;
}

.animate-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #eee;
}

.animate-block {
    -webkit-transform-style: preserve-3d;
    transition: 1s ease;
}

.animate-front,
.animate-back {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
    height: 100%;
    width: 100%;
}

.animate-back0,
.animate-back2,
.animate-back4 {
    transform: rotateX(180deg) rotateY(0deg);
}

.animate-back1,
.animate-back3,
.animate-back5 {
    transform: rotateX(0deg) rotateY(180deg);
}

@keyframes name0 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg);
    }
}

@keyframes name1 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    }
}

@keyframes name2 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    50% {
        transform: translate3d(0, 45px, 220px) rotateX(90deg) rotateY(90deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
    }
}

@keyframes name3 {
    0% {
        transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translate3d(0px, 0px, 800px) rotateX(0deg) rotateY(45deg) rotateZ(0deg);
    }
    50% {
        transform: translate3d(0px, 0px, 888px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    }
    75% {
        transform: translate3d(0px, 0px, 800px) rotateX(0deg) rotateY(135deg) rotateZ(0deg);
    }
    100% {
        transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    }
}

@keyframes name4 {
    0% {
        transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translate3d(0px, 0px, -200px) rotateX(90deg) rotateY(90deg) rotateZ(40deg);
    }
    50% {
        transform: translate3d(0px, 0px, -200px) rotateX(120deg) rotateY(180deg) rotateZ(0deg);
    }
    75% {
        transform: translate3d(0px, 0px, -200px) rotateX(150deg) rotateY(270deg) rotateZ(-40deg);
    }
    100% {
        transform: translate3d(0px, 0px, 0px) rotateX(180deg) rotateY(360deg) rotateZ(0deg);
    }
}

@keyframes name5 {
    0% {
        transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    45% {
        transform: translate3d(0px, 0px, -800px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    }
    50% {
        transform: translate3d(0px, 0px, -800px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    }
    55% {
        transform: translate3d(0px, 0px, -800px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    }
    100% {
        transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    }
}

.animate-name0 {
    -webkit-animation: name0 1s 1 both linear;
    -o-animation: name0 1s 1 both linear;
    animation: name0 1s 1 both linear;
}

.animate-name1 {
    -webkit-animation: name1 1s 1 both linear;
    -o-animation: name1 1s 1 both linear;
    animation: name1 1s 1 both linear;
}

.animate-name2 {
    -webkit-animation: name2 1s 1 both linear;
    -o-animation: name2 1s 1 both linear;
    animation: name2 1s 1 both linear;
}

.animate-name3 {
    -webkit-animation: name3 1s 1 both linear;
    -o-animation: name3 1s 1 both linear;
    animation: name3 1s 1 both linear;
}

.animate-name4 {
    -webkit-animation: name4 1s 1 both linear;
    -o-animation: name4 1s 1 both linear;
    animation: name4 1s 1 both linear;
}

.animate-name5 {
    -webkit-animation: name5 1s 1 both linear;
    -o-animation: name5 1s 1 both linear;
    animation: name5 1s 1 both linear;
}
